<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            @if (selectFilesEnabled()) {
                <ion-button fill="clear" [ariaLabel]="'core.close' | translate" (click)="cancelFileSelection()">
                    <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
                </ion-button>
            } @else {
                <ion-back-button [text]="'core.back' | translate" />
            }
        </ion-buttons>
        <ion-title>
            <h1>{{ selectFilesEnabled() ? (selectedFiles.length + ' ' + title) : title }}</h1>
        </ion-title>
        <ion-buttons slot="end">
            @if (selectFilesEnabled() && selectedFiles.length > 0) {
                <ion-button fill="clear" (click)="deleteSelectedFiles(true)" [ariaLabel]="'core.delete' | translate" color="danger">
                    <ion-icon slot="icon-only" name="fas-trash" aria-hidden="true" />
                </ion-button>
            }
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content class="limited-width">
    <ion-refresher slot="fixed" [disabled]="!filesLoaded || (!showPrivateFiles && !showSiteFiles)"
        (ionRefresh)="refreshData($event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
    </ion-refresher>

    @if (showPrivateFiles || showSiteFiles) {
        <core-loading [hideUntil]="filesLoaded">
            <!-- Allow selecting the files to see: private or site. -->
            @if (showPrivateFiles && showSiteFiles && !path) {
                <core-combobox [(selection)]="root" (onChange)="rootChanged()">
                    <ion-select-option class="ion-text-wrap" value="my">
                        {{ 'addon.privatefiles.privatefiles' | translate }}
                    </ion-select-option>
                    <ion-select-option class="ion-text-wrap" value="site">
                        {{ 'addon.privatefiles.sitefiles' | translate }}
                    </ion-select-option>
                </core-combobox>
            }

            <!-- Display info about space used and space left. -->
            @if (userQuota && filesInfo && filesInfo.filecount > 0) {
                <ion-card class="core-info-card">
                    <ion-item>
                        <ion-icon slot="start" aria-label="hidden" name="fas-cloud" />
                        <ion-label>
                            {{ 'core.quotausage' | translate:{$a: {used: spaceUsed, total: userQuotaReadable} } }}
                        </ion-label>
                    </ion-item>
                </ion-card>
            }

            <!-- List of files. -->
            @if (files && files.length > 0) {
                <ion-list>
                    <ng-container *ngFor="let file of files">
                        @if (file.isdir) {
                            <ion-card>
                                <ion-item button class="ion-text-wrap item-file item-directory" (click)="openFolder(file)" [detail]="true">
                                    <ion-icon name="fas-folder" slot="start" [attr.aria-label]="'core.folder' | translate" />
                                    <ion-label>{{file.filename}}</ion-label>
                                </ion-item>
                            </ion-card>
                        } @else {
                            <addon-privatefiles-file [file]="file" [component]="component" [componentId]="file.contextid"
                                (onOpenMenuClick)="root === 'my' && openManagementFileMenu($event, file)"
                                (longPress)="canDeleteFiles && root === 'my' && enableMultipleSelection(file)"
                                [showCheckbox]="canDeleteFiles && root === 'my' && selectFilesEnabled()"
                                (onSelectedFileChange)="root === 'my' && selectedFileValueChanged($event, file)" showDownloadStatus="true"
                                [selected]="file.selected" [canDelete]="canDeleteFiles && root === 'my'" />
                        }
                    </ng-container>
                </ion-list>
            } @else {
                <!-- Message telling there are no files. -->
                <core-empty-box icon="far-folder-open" [message]="'addon.privatefiles.emptyfilelist' | translate" />
            }
        </core-loading>
    }

    <!-- Upload a private file. -->
    @if (showUpload && root !== 'site' && !path && !selectFilesEnabled()) {
        <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end">
            <ion-fab-button (click)="uploadFile()" [attr.aria-label]="'core.fileuploader.uploadafile' | translate">
                <ion-icon name="fas-arrow-up-from-bracket" aria-hidden="true" />
                <span class="sr-only">{{ 'core.fileuploader.uploadafile' | translate }}</span>
            </ion-fab-button>
        </ion-fab>
    }
</ion-content>

@if (selectFilesEnabled()) {
    <div class="ion-padding addons-privatefiles-index-select-all">
        <ion-checkbox labelPlacement="end" [(ngModel)]="selectAll" (ngModelChange)="onSelectAllChanges($event)">
            {{ 'core.selectall' | translate }}
        </ion-checkbox>
    </div>
}
